<!doctype html>
<style>
  div {
    transition: --my-property steps(2, start) 100s;
  }
</style>
<div id=div></div>
<script>
  let style1 = document.createElement("style");
  style1.textContent = `
      @property --my-property {
        syntax: "<angle>";
        inherits: false;
        initial-value: -90deg;
      }
    `;

  let style2 = document.createElement("style");
  style2.textContent = "div { --my-property: 90deg; }";

  document.body.append(style1);
  getComputedStyle(div).getPropertyValue("--my-property");
  document.body.append(style2);
  getComputedStyle(div).getPropertyValue("--my-property");
  style1.remove();
  style2.remove();
</script>
